<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <comp-a :count="10"></comp-a>
    </div>
</body>

<script>
    // 组件封装注意:
    // 1. data选项, 要求是返回对象的函数 => 每个组件中的数据都是独立的
    // 2. 单个根元素(Vue2)     => Vue3可以有多个同级元素
    // 3. 单项数据流   =>  父组件给子组件传入的数据,子组件不能直接修改  => 直接修改会报错

    // 父组件传入的数据如果子组件想修改的 -> 只能间接改?
    // 1. 将父组件传入的值作为子组件的初始值(data), 在子组件初始化时执行一次 
    // 2. 根据父组件传入的值得到新值=> 计算属性
    let CompA = {
        props: ["count"],  // this.count
        data: function () {
            // data -> 返回数据的函数  this指向组件实例
            return {
                myCount: this.count, // 将父组件传入的值作为子组件的初始值 (data函数只在子组件初始化渲染时执行一次)
            }
        },
        template: `<div class="comp-a">
            <p>{{myCount}}</p>
            <p><button @click="myCount++">myCount++</button></p>
        </div>`,
        beforeUpdate() {
            console.log("更新前");
        },
        updated() {
            console.log("更新后");
        },
    }

    var app = new Vue({
        el: "#app",
        data: {

        },
        components: {
            CompA,
        },
        beforeUpdate() {
            console.log("根组件:更新前");
        },
        updated() {
            console.log("根组件:更新后");
        },
    })

</script>

</html>